<template>
	<view class="quality-query-page">
		<view class="card">
			<view class="card-title">软水方案对比</view>
			<view class="card-content">
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" background="#fff"
					tooltipFormat="qytip" />
				<!-- <canvas canvas-id="column" id="column" class="charts" bindtouchend="tap" /> -->
				<!-- <qiun-data-charts type="column" :chartData="chartData" /> -->
			</view>
		</view>
	</view>
</template>

<script>
	// import uCharts from '/common/u-charts.js';
	// import { getMatchResultList } from '/pages/softwater/softwater.vue'
	import { getMatchResultList } from '/common/share.js';

	var uChartsInstance = {};
	export default {
		onShareAppMessage() {
					return {
						title: '沁园全屋',
						imageUrl: "",
						path: "pages/index/index"
					}
				},
		data() {
			return {
				chartData: {},
				matchResultList: [],
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" ],
					// rotate:true,
					padding: [15, 0, 5, 0],
					enableMarkLine: false,
					fontSize: 10,
					legend: {
						position: 'top',
						margin: 20,
						padding: 20,
						itemGap: 20,
						fontSize: 14,
						// borderWidth:1,
						// borderColor:'#ccc'
					},
					markLine: {
						type: 'dash',
					},
					xAxis: {
						fontSize: 12,
						disableGrid: false,
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'line',

					},
					yAxis: {
						gridType: "dash",
						dashLength: 4,
						splitNumber: 1,
						disabled: true,
						disableGrid: true,


						data: [{
							min: 0,
							disabled: true,
							textAlign: 'center',
							// unit:'tt'


						}]
					},
					extra: {
						markLine: {
							dashLength: 0,
						},
						column: {
							type: "group",
							width: 20,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							seriesGap: 2,
							categoryGap: 10,
							barBorderRadius: [20, 20, 0, 0],
						},
						tooltip: {
							borderRadius:5,
							showCategory:true, 
						}

					},
				}
			}
		},
		onReady() {
    //这里的 750 对应 css .charts 的 width
			this.cWidth = uni.upx2px(660);
			//这里的 500 对应 css .charts 的 height
			this.cHeight = uni.upx2px(500);
			// this.getServerData();
			this.getList()
		},
		methods: {
			getList() {
				const list = getMatchResultList()
				if (!list || !list.length) {
					return
				}
				this.matchResultList = list;
				// const keys = ['annual_salt_consumption', 'salt_addition_interval', 'regeneration_cycle', 'resin_amount']
				const categories = ["年耗盐量(Kg)", "加盐周期(天)", "再生周期(天)", "建议单次加盐(Kg)"]
				const series = list.map((e, index) => {
					return {
						name: e.product_model,
						data: [
							e['annual_salt_consumption'],
							e['salt_addition_interval'],
							e['regeneration_cycle'],
							e['resin_amount'],
							// e[keys[0]],
							// e[keys[1]],
							// e[keys[2]],
							// e[keys[3]],
						]
					}
				})
				this.chartData = JSON.parse(JSON.stringify({
					categories,
					series
				}))
				// this.drawCharts('column', {
				// 	categories, series
				// });
			},
			getServerData() {
      //模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
							categories: ["2016","2017","2018","2019","2020","2021"],
							series: [
								{
									name: "目标值",
									data: [35,36,31,33,13,34]
								},
								{
									name: "完成量",
									data: [18,27,21,24,6,28]
								}
							]
						};
					this.drawCharts('column', res);
				}, 500);
			},
			drawCharts(id,data){
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					categories: data.categories,
					series: data.series,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" ],
					type: "column",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					// animation: true,
					// background: "#FFFFFF",
					padding: [15, 0, 5, 0],
					enableMarkLine: false,
					legend: {
						position: 'top',
						margin: 20,
						padding: 20,
						itemGap: 20,
						fontSize: 14,
						// borderWidth:1,
						// borderColor:'#ccc'
					},
					markLine: {
						type: 'dash'
					},
					xAxis: {
						disableGrid: true,
						fontSize: 12,
						// rotateLabel: true,
						// rotateAngle:45, //旋转角度，默认45度
						// labelCount:5
					},
					yAxis: {
						gridType: "dash",
						dashLength: 4,
						splitNumber: 5,
						data: [
							{
								min: 0,
								disabled: true,
								textAlign: 'center',
							}
						],
					},
					extra: {
						column: {
							type: "group",
							width: 20,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							seriesGap: 2,
							categoryGap: 10,
							barBorderRadius: [20, 20, 0, 0]
						},
						tooltip: {
							borderRadius: 5,
							showCategory:true, 
						}
					}
				});
			},
			tap(e){
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			}
		}
	}
</script>

<style lang="scss">
	page {
		// min-height: 100vh;
		height: 100%;
	}
	.card-content {
		height: calc(50vh);
	}
	.charts {
    width: 100%;
    height: 600rpx;
  }
	.quality-query-page {
		background-color: #fff;
		padding: 40rpx 0;
		background: url("/static/szbg.png");
		background-size: 100% auto;
		background-position: 0 -140rpx;
		background-repeat: no-repeat;
	}

	.card {
		margin: 20rpx 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 10px;
		border: 1px solid #eee;
		background-color: #fff;
		box-shadow: 1rpx 1rpx 2rpx #eee;
	}

	.card-title {
		color: #04158c;
		font-size: 20px;
		text-align: center;
		letter-spacing: 1px;
		font-weight: bold;
		padding-top: 40rpx;
		padding-bottom: 80rpx;
	}

</style>
